// pages/acupoint-detail/acupoint-detail.js
Page({
  data: {
    currentView: 'front',
    currentViewImage: 'http://39.97.48.169:9000/zhongyi/e861db718e094fcab304882b42fdde31.png',
    viewImages: {
      front: 'http://39.97.48.169:9000/zhongyi/e861db718e094fcab304882b42fdde31.png', // 成人正面
      side: 'http://39.97.48.169:9000/zhongyi/71b0c8210d1443cbb9f3485ca13a0484.png',  // 成人侧面
      back: 'http://39.97.48.169:9000/zhongyi/67de2162e4624d5fb0f05f7f04ff0a08.png'   // 成人背面
    },
    acupoint: {},
    searchKeyword: '',
    searchResults: [],
    showSearchResults: false,
    highlightedAcupoint: null,
    searchTimer: null // 搜索防抖定时器
  },

  onLoad(options) {
    const id = options.id
    console.log('穴位详情页面加载，参数:', options)
    this.loadAcupointDetail(id)
  },

  // 加载穴位详情
  loadAcupointDetail(id) {
    // 模拟穴位数据
    const acupointData = {
      1: {
        id: 1,
        imageTitle: '成人全身穴位图',
        imageUrl: 'http://39.97.48.169:9000/zhongyi/e861db718e094fcab304882b42fdde31.png',
        imageCategory: 1,
        categoryText: '成人',
        bodyPosition: '全身',
        isFree: true,
        price: 0,
        viewCount: 3200,
        description: '成人全身穴位图，包含主要经络和穴位，适合中医学习和临床应用。图中详细标注了人体各个重要穴位的位置，包括十二经脉和奇经八脉上的主要穴位。',
        acupointCount: 365,
        viewImages: {
          front: 'http://39.97.48.169:9000/zhongyi/e861db718e094fcab304882b42fdde31.png',
          side: 'http://39.97.48.169:9000/zhongyi/71b0c8210d1443cbb9f3485ca13a0484.png',
          back: 'http://39.97.48.169:9000/zhongyi/67de2162e4624d5fb0f05f7f04ff0a08.png'
        }
      },
      2: {
        id: 2,
        imageTitle: '儿童全身穴位图',
        imageUrl: 'http://39.97.48.169:9000/zhongyi/u7348.png',
        imageCategory: 2,
        categoryText: '儿童',
        bodyPosition: '全身',
        isFree: false,
        price: 39,
        viewCount: 2800,
        description: '儿童专用穴位图，适合小儿推拿。图中详细标注了儿童身体各个重要穴位的位置，包括小儿推拿常用的穴位。',
        acupointCount: 200,
        viewImages: {
          front: 'http://39.97.48.169:9000/zhongyi/u7348.png',
          side: 'http://39.97.48.169:9000/zhongyi/u7348.png', // 儿童侧面暂时使用正面图
          back: 'http://39.97.48.169:9000/zhongyi/u7363.png'
        }
      },
      3: {
        id: 3,
        imageTitle: '成人背部穴位图',
        imageUrl: 'http://39.97.48.169:9000/zhongyi/67de2162e4624d5fb0f05f7f04ff0a08.png',
        imageCategory: 1,
        categoryText: '成人',
        bodyPosition: '背部',
        isFree: true,
        price: 0,
        viewCount: 2500,
        description: '成人背部穴位图，重点标注背部经络',
        acupointCount: 120,
        viewImages: {
          front: 'http://39.97.48.169:9000/zhongyi/e861db718e094fcab304882b42fdde31.png',
          side: 'http://39.97.48.169:9000/zhongyi/71b0c8210d1443cbb9f3485ca13a0484.png',
          back: 'http://39.97.48.169:9000/zhongyi/67de2162e4624d5fb0f05f7f04ff0a08.png'
        }
      },
      4: {
        id: 4,
        imageTitle: '成人正面穴位图',
        imageUrl: 'http://39.97.48.169:9000/zhongyi/e861db718e094fcab304882b42fdde31.png',
        imageCategory: 1,
        categoryText: '成人',
        bodyPosition: '正面',
        isFree: false,
        price: 29,
        viewCount: 2200,
        description: '成人正面穴位图，包含胸腹部主要穴位',
        acupointCount: 150,
        viewImages: {
          front: 'http://39.97.48.169:9000/zhongyi/e861db718e094fcab304882b42fdde31.png',
          side: 'http://39.97.48.169:9000/zhongyi/71b0c8210d1443cbb9f3485ca13a0484.png',
          back: 'http://39.97.48.169:9000/zhongyi/67de2162e4624d5fb0f05f7f04ff0a08.png'
        }
      },
      5: {
        id: 5,
        imageTitle: '儿童头部穴位图',
        imageUrl: 'http://39.97.48.169:9000/zhongyi/u7348.png',
        imageCategory: 2,
        categoryText: '儿童',
        bodyPosition: '头部',
        isFree: true,
        price: 0,
        viewCount: 1800,
        description: '儿童头部穴位图，适合小儿头部按摩',
        acupointCount: 80,
        viewImages: {
          front: 'http://39.97.48.169:9000/zhongyi/u7348.png',
          side: 'http://39.97.48.169:9000/zhongyi/u7348.png',
          back: 'http://39.97.48.169:9000/zhongyi/u7363.png'
        }
      },
      6: {
        id: 6,
        imageTitle: '成人四肢穴位图',
        imageUrl: 'http://39.97.48.169:9000/zhongyi/71b0c8210d1443cbb9f3485ca13a0484.png',
        imageCategory: 1,
        categoryText: '成人',
        bodyPosition: '四肢',
        isFree: false,
        price: 35,
        viewCount: 2000,
        description: '成人四肢穴位图，包含手臂和腿部穴位',
        acupointCount: 200,
        viewImages: {
          front: 'http://39.97.48.169:9000/zhongyi/e861db718e094fcab304882b42fdde31.png',
          side: 'http://39.97.48.169:9000/zhongyi/71b0c8210d1443cbb9f3485ca13a0484.png',
          back: 'http://39.97.48.169:9000/zhongyi/67de2162e4624d5fb0f05f7f04ff0a08.png'
        }
      },
      7: {
        id: 7,
        imageTitle: '儿童背部穴位图',
        imageUrl: 'http://39.97.48.169:9000/zhongyi/u7363.png',
        imageCategory: 2,
        categoryText: '儿童',
        bodyPosition: '背部',
        isFree: true,
        price: 0,
        viewCount: 1500,
        description: '儿童背部穴位图，适合小儿背部按摩',
        acupointCount: 100,
        viewImages: {
          front: 'http://39.97.48.169:9000/zhongyi/u7348.png',
          side: 'http://39.97.48.169:9000/zhongyi/u7348.png',
          back: 'http://39.97.48.169:9000/zhongyi/u7363.png'
        }
      },
      8: {
        id: 8,
        imageTitle: '大椎穴',
        imageUrl: 'https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=500&h=300&fit=crop&crop=center',
        imageCategory: 1,
        categoryText: '成人',
        bodyPosition: '背面',
        isFree: true,
        price: 0,
        viewCount: 900,
        categoryId: 3,
        viewImages: {
          front: 'http://39.97.48.169:9000/zhongyi/e861db718e094fcab304882b42fdde31.png',
          side: 'http://39.97.48.169:9000/zhongyi/71b0c8210d1443cbb9f3485ca13a0484.png',
          back: 'http://39.97.48.169:9000/zhongyi/67de2162e4624d5fb0f05f7f04ff0a08.png'
        }
      }
    }

    const acupoint = acupointData[id] || {}
    console.log('加载的穴位数据:', acupoint)
    console.log('穴位ID:', id, '类型:', typeof id)
    
    // 根据穴位类型设置视图图片
    if (acupoint.viewImages) {
      this.setData({
        acupoint,
        currentViewImage: acupoint.viewImages.front,
        viewImages: acupoint.viewImages
      })
    } else {
      this.setData({ acupoint })
    }
  },

  // 切换视图
  switchView(e) {
    const view = e.currentTarget.dataset.view
    console.log('切换视图:', view)
    
    const newImage = this.data.viewImages[view] || this.data.currentViewImage
    this.setData({
      currentView: view,
      currentViewImage: newImage
    })
  },

  // 搜索输入
  onSearchInput(e) {
    const keyword = e.detail.value
    this.setData({
      searchKeyword: keyword
    })
    
    // 如果清空输入框，重置搜索结果
    if (!keyword.trim()) {
      this.setData({
        showSearchResults: false,
        searchResults: [],
        highlightedAcupoint: null
      })
    }
  },

  // 搜索确认（点击搜索按钮或按回车）
  onSearchConfirm() {
    const keyword = this.data.searchKeyword.trim()
    
    if (!keyword) {
      wx.showToast({
        title: '请输入穴位名',
        icon: 'none'
      })
      return
    }
    
    // 执行搜索并显示红点标记
    this.performSearch(keyword)
    
    // 显示搜索成功提示
    wx.showToast({
      title: '搜索完成',
      icon: 'success',
      duration: 1500
    })
  },

  // 执行搜索
  performSearch(keyword) {
    console.log('执行搜索:', keyword)
    
    // 模拟穴位数据（实际项目中应该从API获取）
    const acupoints = [
      { id: 1, name: '百会穴', meridian: '督脉', position: '头顶正中线与两耳尖连线的交点处' },
      { id: 2, name: '大椎穴', meridian: '督脉', position: '第7颈椎棘突下凹陷中' },
      { id: 3, name: '足三里', meridian: '胃经', position: '膝下3寸，胫骨前缘外侧1横指' },
      { id: 4, name: '合谷穴', meridian: '大肠经', position: '手背第1、2掌骨间，第2掌骨桡侧中点' },
      { id: 5, name: '内关穴', meridian: '心包经', position: '前臂掌侧，腕横纹上2寸' },
      { id: 6, name: '涌泉穴', meridian: '肾经', position: '足底前1/3处，足趾屈曲时凹陷处' },
      { id: 7, name: '神门穴', meridian: '心经', position: '腕横纹尺侧端，尺侧腕屈肌腱桡侧凹陷处' },
      { id: 8, name: '太冲穴', meridian: '肝经', position: '足背第1、2跖骨结合部前方凹陷处' },
      { id: 9, name: '三阴交', meridian: '脾经', position: '内踝尖上3寸，胫骨内侧缘后方' },
      { id: 10, name: '关元穴', meridian: '任脉', position: '脐下3寸，前正中线上' }
    ]
    
    // 搜索穴位
    const results = acupoints.filter(acupoint =>
      acupoint.name.includes(keyword) ||
      acupoint.meridian.includes(keyword) ||
      acupoint.position.includes(keyword)
    )
    
    this.setData({
      searchResults: results,
      showSearchResults: results.length > 0,
      highlightedAcupoint: results.length > 0 ? results[0] : null
    })
  },

  // 选择搜索结果
  selectSearchResult(e) {
    const acupoint = e.currentTarget.dataset.acupoint
    console.log('选择穴位:', acupoint)
    
    this.setData({
      highlightedAcupoint: acupoint,
      showSearchResults: false
    })
    
    wx.showToast({
      title: `已选择${acupoint.name}`,
      icon: 'success',
      duration: 1500
    })
  },

  // 图片加载成功
  onImageLoad(e) {
    console.log('图片加载成功:', e)
  },

  // 图片加载失败
  onImageError(e) {
    console.error('图片加载失败:', e)
    wx.showToast({
      title: '图片加载失败',
      icon: 'error'
    })
  },

  // 返回上一页
  goBack() {
    if (getCurrentPages().length > 1) {
      wx.navigateBack()
    } else {
      wx.switchTab({ url: '/pages/index/index' })
    }
  }

})